<template>
  <el-dialog
    :title="addOrEdit === 0 ? '新增题库' : '编辑题库'"
    :visible.sync="dialogFormVisible"
    center
    class="my-dialog questionDiaog"
    fullscreen
    top="10vh"
    @closed="closedHandler"
  >
    <el-form :model="form" :rules="rules" ref="questionForm">
      <el-form-item label="学科" prop="subject" :label-width="formLabelWidth">
        <subSelect v-model="form.subject"></subSelect>
      </el-form-item>
      <el-form-item label="阶段" prop="step" :label-width="formLabelWidth">
        <el-select v-model="form.step" placeholder="请选择阶段">
          <el-option label="初级" value="1"></el-option>
          <el-option label="中级" value="2"></el-option>
          <el-option label="高级" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="企业"
        prop="enterprise"
        :label-width="formLabelWidth"
      >
        <comSelect v-model="form.enterprise"></comSelect>
      </el-form-item>
      <el-form-item label="城市" prop="city" :label-width="formLabelWidth">
        <el-cascader
          v-model="form.city"
          :options="options"
          :props="{ expandTrigger: 'hover' }"
          @change="handleChange"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="题型" prop="type" :label-width="formLabelWidth">
        <el-radio-group v-model="form.type">
          <el-radio :label="1">单选</el-radio>
          <el-radio :label="2">多选</el-radio>
          <el-radio :label="3">简答</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="难度" prop="step" :label-width="formLabelWidth">
        <el-radio-group v-model="form.step">
          <el-radio :label="1">简单</el-radio>
          <el-radio :label="2">一般</el-radio>
          <el-radio :label="3">困难</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 分割 -->
      <el-divider></el-divider>
      <!-- 标题 -->
      <el-form-item
        label="试题标题"
        prop="title"
        :label-width="formLabelWidth"
        class="textBox"
      >
        <quillEditor v-model="form.title"> </quillEditor>
      </el-form-item>
      <!-- 分割 -->
      <el-divider></el-divider>
      <!-- 单选 -->
      <el-form-item
        label="单选"
        prop="single_select_answer"
        :label-width="formLabelWidth"
        class="singleSelect"
        v-if="form.type === 1"
      >
        <el-radio-group v-model="form.single_select_answer">
          <singleOption
            v-for="item in form.select_options"
            :key="item.label"
            :label="item.label"
            :text.sync="item.text"
            :image.sync="item.image"
          ></singleOption>
        </el-radio-group>
      </el-form-item>
      <!-- 多选 -->
      <el-form-item
        label="多选"
        prop="multiple_select_answer"
        :label-width="formLabelWidth"
        class="singleSelect multipleSelect"
        v-else-if="form.type === 2"
      >
        <el-radio-group v-model="form.multiple_select_answer">
          <multipleOption
            v-for="item in form.select_options"
            :key="item.label"
            :label="item.label"
            :text.sync="item.text"
            :image.sync="item.image"
          ></multipleOption>
        </el-radio-group>
      </el-form-item>
      <!-- 简答 -->
      <el-form-item
        class="option-form-item"
        label="简答"
        prop="short_answer"
        :label-width="formLabelWidth"
        v-else
      >
        <el-input
          type="textarea"
          :rows="2"
          v-model="form.short_answer"
        ></el-input>
      </el-form-item>
      <!-- 分割 -->
      <el-divider></el-divider>
      <!-- 视频区域
       -->
      <el-form-item label="解析视频" prop="video" :label-width="formLabelWidth">
        <el-upload
          class="avatar-uploader"
          :action="uploadUrl"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <video
            v-if="form.video"
            :src="baseUrl + '/' + form.video"
            controls
            autoplay
            loop
          ></video>
          <template v-else>
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传视频格式文件
            </div>
          </template>
        </el-upload>
      </el-form-item>
      <!-- 分割 -->
      <el-divider></el-divider>
      <!-- 答案解析 -->
      <el-form-item
        label="答案解析"
        prop="answer_analyze"
        class="editor-item textBox"
      >
        <quillEditor v-model="form.answer_analyze"></quillEditor>
      </el-form-item>
      <el-divider></el-divider>

      <!-- 试题备注 -->
      <el-form-item
        label="试题备注"
        prop="remark"
        :label-width="formLabelWidth"
      >
        <el-input type="textarea" :rows="2" v-model="form.remark"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="removeForm">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
// 导入发起请求
import comSelect from './comSelect'
import subSelect from './subSelect'
import { regionData } from 'element-china-area-data/dist/app.commonjs'
// 单选组件
import singleOption from './singleOption'
import multipleOption from './multipleOption'

// 富文本编辑器
// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
// 导入接口
import { addQuestion, editQuestion } from '../../../api/question'

export default {
  name: 'questionDialog',
  components: {
    comSelect,
    subSelect,
    quillEditor,
    singleOption,
    multipleOption
  },
  data () {
    return {
      // 上传地址
      uploadUrl: process.env.VUE_APP_BaseURL + '/question/upload',
      // 基地址
      baseUrl: process.env.VUE_APP_BaseURL,
      // 级联城市数据
      options: regionData,
      // 判断是新增还是编辑
      addOrEdit: 0,
      form: {
        title: '', // 标题
        type: 1, // 题型
        subject: '', // 学科
        step: 1, // 阶段
        enterprise: '', // 企业
        difficulty: 2, // 难度
        single_select_answer: 'A', // 单选答案
        video: '', // 视频
        remark: '', // 备注
        city: [], // 城市
        answer_analyze: '', // 答案解析
        select_options: [
          {
            label: 'A',
            text: '',
            image: ''
          },
          {
            label: 'B',
            text: '',
            image: ''
          },
          {
            label: 'C',
            text: '',
            image: ''
          },
          {
            label: 'D',
            text: '',
            image: ''
          }
        ]
      },
      rules: {
        title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
        subject: [{ required: true, message: '学科不能为空', trigger: 'blur' }],
        step: [{ required: true, message: '阶段不能为空', trigger: 'blur' }],
        enterprise: [
          { required: true, message: '企业不能为空', trigger: 'blur' }
        ],
        city: [{ required: true, message: '城市不能为空', trigger: 'blur' }],
        type: [{ required: true, message: '题型不能为空', trigger: 'blur' }],
        difficulty: [
          { required: true, message: '难度不能为空', trigger: 'blur' }
        ],
        single_select_answer: [
          { required: true, message: '单选答案不能为空', trigger: 'blur' }
        ],
        multiple_select_answer: [
          { required: true, message: '多选答案不能为空', trigger: 'blur' }
        ],
        short_answer: [
          { required: true, message: '简答答案不能为空', trigger: 'blur' }
        ],
        answer_analyze: [
          { required: true, message: '答案解析不能为空', trigger: 'blur' }
        ],
        remark: [{ required: true, message: '备注不能为空', trigger: 'blur' }],
        select_options: [
          { required: true, message: '选项不能为空', trigger: 'blur' }
        ]
      },
      dialogFormVisible: false,
      formLabelWidth: '105px'
    }
  },
  methods: {
    // 上传成功
    handleAvatarSuccess (res, file) {
      // this.imageUrl = URL.createObjectURL(file.raw)
      // console.log('res:', res)
      this.form.video = res.data.url
    },
    // 上传之前校验
    beforeAvatarUpload (file) {
      // console.log('file:', file)
      const isJPG = file.type === 'video/mp4'
      const isLt2M = file.size / 1024 / 1024 < 10

      if (!isJPG) {
        this.$message.error('只能上传mp4格式的视频!')
      }
      if (!isLt2M) {
        this.$message.error('上传视频大小不能超过 10MB!')
      }
      return isJPG && isLt2M
    },
    handleChange (value) {
      console.log(value)
    },
    closedHandler () {
      this.$refs.comForm.resetFields()
      // 关闭时顺手复原
      this.form = {
        title: '', // 标题
        type: 1, // 题型
        subject: '', // 学科
        step: 1, // 阶段
        enterprise: '', // 企业
        difficulty: 2, // 难度
        single_select_answer: 'A', // 单选答案
        video: '', // 视频
        remark: '', // 备注
        city: [], // 城市
        answer_analyze: '', // 答案解析
        select_options: [
          {
            label: 'A',
            text: '',
            image: ''
          },
          {
            label: 'B',
            text: '',
            image: ''
          },
          {
            label: 'C',
            text: '',
            image: ''
          },
          {
            label: 'D',
            text: '',
            image: ''
          }
        ]
      }
    },
    submitForm () {
      this.$refs.questionForm.validate(valid => {
        if (valid) {
          // alert('submit!')
          if (this.addOrEdit === 1) {
            editQuestion(this.form).then(res => {
              console.log('res:', res)
              this.dialogFormVisible = false
              this.$emit('finished')
            })
          } else {
            addQuestion(this.form).then(res => {
              console.log('res:', res)
              this.dialogFormVisible = false
              this.$emit('finished')
            })
          }
        } else {
          console.log('error submit!!')
          this.$message.warning('数据格式有误')
          return false
        }
      })
    },
    removeForm () {
      this.dialogFormVisible = false
    }
  }
}
</script>

<style lang="less">
.questionDiaog {
  .el-form {
    margin: 0 auto;
    width: 832px;
  }
  .el-select {
    width: 364px;
  }
  .textBox {
    .el-form-item__content {
      margin-top: 60px;
      margin-left: 0 !important;
      .ql-formats {
        line-height: 22px;
      }
    }
  }
  .multipleSelect {
    .el-checkbox {
      margin-right: 20px;
    }
  }
}
</style>
